<template>
<v-content>
    <v-container fluid fill-height>
        <v-layout align-center justify-center>
            <div>
                <v-card>
                    <v-card-title>
                        Generate OTP for LED Display Login
                    </v-card-title>

                    <v-card-text>
                        <br>
                        <h1 class="text-center primary--text">{{ otp }}</h1>
                        <br>
                    </v-card-text>

                    <v-card-actions>
                        <v-btn @click="generateOtp" color="secondary" text>Generate</v-btn>
                    </v-card-actions>
                </v-card>

                <br>
                <v-divider></v-divider>
                <br>

                <v-card>
                    <v-card-title>
                        LED Display Link
                    </v-card-title>

                    <v-card-text>
                        <br>
                        <div style="margin: 0 5px 0 5px;">
                            <h4>LED Login Page</h4>
                            <p class="lighten-3--text">{{ VUE_APP_URL }}/display/login</p>
                            <v-btn color="primary" @click="copyLink(`${VUE_APP_URL}/display/login`)">COPY</v-btn>
                        </div>
                    </v-card-text>
                </v-card>
            </div>
        </v-layout>
    </v-container>
</v-content>
</template>

<script lang="ts">
import Vue from 'vue';
import store from '@/store/Index';

const { VUE_APP_URL } = process.env;

export default Vue.extend({
    data() {
        return {
            otp: '******',
            VUE_APP_URL,
        };
    },
    methods: {
        generateOtp() {
            store.loader.run(async () => {
                this.otp = await store.user.generateLoginOtp();
                await this.$copyText(this.otp);
                store.alert.show('OTP are successfully generated and copied!', 'success');
            });
        },
        async copyLink(link: string) {
            // @ts-ignore
            await this.$copyText(link);
            store.alert.show('Successfully copied!', 'success');
        },
    },
    async beforeDestroy() {
        this.otp = await store.user.clearLoginOtp();
    },
});
</script>
